<template>
	<div class="top-search-rd">
		<div class="search-category">
			<router-link to="/cate" tag="a" class="search-category-btn">
				<i></i>
			</router-link>
		</div>
		<div class="search-input">
			<i></i>
			<router-link to="/search" tag="a" class="search-input-btn">
				搜索...
			</router-link>
		</div>
		<div class="search-message">
			<a href="javascript:;" class="search-message-btn"></a>
		</div>
		<div class="search-bg" :style="{opacity:op}"></div>
	</div>
</template>

<style scoped="" lang="scss">
	.top-search-rd{
		position: fixed;
		height: 50px;
		width: 100%;
		padding: 10px a(80px);
		line-height: 50px;
		z-index: 30;

		.search-category{
			position: absolute;
			left:10px;
			top:0;

			.search-category-btn{
				display: inline-block;
				i{
					display: inline-block;
					margin-top: 14px;
					width:20px;
					height:20px;
					background: url("") no-repeat;
					background-size: 100% 100%;
					position: relative;
		    		z-index: 20;
				}
			}
		}

		.search-input{
			padding:0 20px 0 40px;
			background-color: #fff;
			border-radius: 30px;
			height:30px;
			line-height: 30px;
			position: relative;

			i{
				display: inline-block;
			    position: absolute;
			    top:7px;
			    left:20px;
			    width: 14px;
			    height: 14px;

				background: url() no-repeat;
			    background-size: contain;
			}

			.search-input-btn{
				display: block;
				width:100%;
				height:100%;
				color:#908a8a;
				font-size: 12px;
			}
		}

		.search-message{
			height:50px;
			position: absolute;
		    right: 10px;
		    top: 0;
			.search-message-btn{
				display: inline-block;
				width:20px;
				height:50px;
				background-image: url();
			    background-repeat: no-repeat;
			    background-size: contain;
			    background-position: 0 10px;

			}
		}

		.search-bg{
			width:100%;
			height:50px;
			//background: #de181b;
			background: #188ade;
			position:absolute;
			top:0;
			left:0;
			opacity: 0;
			z-index: -1;
		}
	}
	
</style>

<script>
	
	export default{
		name: "top-search",
		data(){return{
			op: 0
		}},
		mounted(){
			window.addEventListener('scroll', this.handleScroll);
		},
		methods:{
			handleScroll(){
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				this.op = Math.min(scrollTop * 0.005,0.9)
			}
		},
		destroyed () {
		    window.removeEventListener('scroll', this.handleScroll);
		}
	}

</script>